<template>
  <div style="padding: 10px;">
    <el-col :span="24" class="action-bar">
      <el-input clearable @clear="inputClear" placeholder="商品名称/所属门店/UPC码" style="width:220px;margin-right: 8px" v-model="searchText"></el-input>
      <el-select v-model="isShop" @change="searchData" @clear="selectClear" clearable placeholder="展示状态">
         <el-option :value="1" :label="'上架'" />
        <el-option :value="0" :label="'下架'" />
      </el-select>

      <el-select v-if="!(isComponent==='true')" style="margin-left: 10px" @change="searchData" @clear="merchantSelectClear" clearable v-model="merchantId" placeholder="所属门店">
        <el-option v-for="item in merchantList" :key="item.id" :value="item.id" :label="item.name" />
      </el-select>

      <el-select style="margin-left: 10px" @change="searchData" @clear="classifySelectClear" clearable v-model="classifyId" :placeholder="isComponent==='true'?'商品分类':'商品分类，请先择门店'">
        <el-option v-for="item in classifyList" :key="item.id" :value="item.id" :label="item.name" />
      </el-select>

      <el-select v-if="classifyId" style="margin-left: 10px" @change="searchData" @clear="selectClear" clearable v-model="childClassifyId" placeholder="选择子分类">
        <el-option v-for="item in classifyListSecond" :key="item.id" :value="item.id" :label="item.name" />
      </el-select>

      <el-button type="primary" size="medium" style="margin-left:10px;" @click="searchData">检索</el-button>
      <el-button size="medium" style="margin-left:20px;" @click="resetSearch">重置</el-button>
      <el-button type="primary" size="medium" style="margin-left:20px;" @click="showUploadExcelDialog">导入商品</el-button>
      <el-button type="primary" size="medium" style="margin-left:20px;" @click="exportDialogShow = true">导出检索结果</el-button>
      <router-link :to="{path: '/shopManage/add_goods',query: {storeOneList: page,merchant_id: merchantId}}" style="margin-left: 20px">
        <el-button type="primary" size="medium">添加</el-button>
      </router-link>
    </el-col>

    <el-table stripe :data="tableData" v-loading="tableLoadingShow" element-loading-text="加载中"
              style="width: 100%" class="el_table_style" :header-cell-style="{background:'#eef1f6',color:'#606266'}"
              :default-sort = "{prop: 'stock', order: 'descending'}">
      <el-table-column label="商品ID" prop="id"></el-table-column>
      <el-table-column label="UPC码" prop="upc"></el-table-column>
      <el-table-column width="250" label="商品名称" prop="name">
        <template slot-scope="scope">
          <div style="color: #00a0e9;cursor: pointer" @click="getGoodsDetail(scope.row.id)">
            <el-col>{{scope.row.name}}</el-col>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="封面图" >
        <template slot-scope="scope">
          <div @click="showImgDialog(scope.row.thumb_url)">
            <img :src="scope.row.thumb_url" alt="" style="width:70px;height:70px;object-fit:cover;margin-right: 15px">
          </div>
        </template>
      </el-table-column>
      <el-table-column label="售价" :width="isEditingRow?120:''">
        <template slot-scope="scope">
          <el-col>
            <el-input oninput="if(value < 0 ){value = 0}"   onkeyup="this.value= this.value.match(/\d+(\.\d{0,2})?/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] : ''" size="mini" v-if="scope.row.id==rowEditData.id" type="number" v-model="rowEditData.selling_price"/>
            <div v-else>{{scope.row.selling_price}}</div>
          </el-col>
        </template>
      </el-table-column>
      <el-table-column label="库存" prop="stock" sortable :sort-method="sortByStock">
        <template slot-scope="scope">
          <el-col>
            <el-input oninput="if(value < 0 ){value = 0}" size="mini" v-if="scope.row.id==rowEditData.id" type="number" v-model="rowEditData.stock"/>
            <div v-else>{{scope.row.stock}}</div>
          </el-col>
        </template>
      </el-table-column>
      <el-table-column width="150" prop="classify_name" label="商品分类">
        <template slot-scope="scope">
          <div v-if="scope.row.id==rowEditData.id">
            <el-select size="mini" v-model="rowEditData.classify_first_id" placeholder="选择分类"  @change="chooseClassifyByRowEdit('first')">
              <el-option v-for="opt in classifyListFirstRowEdit" :key="opt.id" :value="opt.id" :label="opt.name" />
            </el-select>
            <el-select size="mini" style="margin-top: 8px" v-if="rowEditData.classify_first_id" v-model="rowEditData.classify_second_id" placeholder="选择二级分类"  @change="chooseClassifyByRowEdit('second')">
              <el-option v-for="opt in classifyListSecondRowEdit" :key="opt.id" :value="opt.id" :label="opt.name" />
            </el-select>
          </div>
          <div v-else>{{scope.row.classify_name}}</div>
        </template>
      </el-table-column>
<!--      <el-table-column label="商品类型" prop="goods_type_name"></el-table-column>-->
<!--      <el-table-column width="130" label="药品类型" prop="sort">-->
<!--        <template slot-scope="scope">-->
<!--          <div v-if="scope.row.drug_type==0">OTC非处方药</div>-->
<!--          <div v-if="scope.row.drug_type==1">Rx处方药</div>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="展示状态">
        <!--<template slot="header" slot-scope="scope">
          <el-input
            size="mini"
            placeholder="输入关键字搜索"/>
        </template>-->
        <template slot-scope="scope">
          <el-tag style="cursor: pointer" type='warning' v-if="scope.row.is_shop==0" @click="spreadOn(scope.row.id)">{{scope.row.is_shop_name}}</el-tag>
          <el-tag style="cursor: pointer" type='success' v-if="scope.row.is_shop==1" @click="spreadOff(scope.row.id)">{{scope.row.is_shop_name}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="商品链接">
        <template slot-scope="scope">
          <el-button type="text"
                     v-clipboard:copy="'/pages/goodsDetail/goodsDetail?id='+scope.row.id"
                     v-clipboard:success="onCopy"
                     size="mini"
                     v-clipboard:error="onError">复制链接</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="merchant_name" width="150" label="所属门店"></el-table-column>
      <el-table-column label="排序" prop="sort">
        <template slot-scope="scope">
          <el-col>
            <el-input oninput="if(value < 0 ){value = 0}" size="mini" v-if="scope.row.id==rowEditData.id" type="number" v-model="rowEditData.sort"/>
            <div v-else>{{scope.row.sort}}</div>
          </el-col>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="250px">
        <template slot-scope="scope">
          <!--<router-link :to="{path:'spu_list',query: {id: scope.row.id}}" style="margin-right: 5px">
            <el-button type="primary" size="mini">规格管理</el-button>
          </router-link>-->
          <!--<el-button type="primary" size="mini" @click="getGoodsDetailAndEdit(scope.row.id,scope.row.merchant_id)">编辑</el-button>-->
          <el-button type="text" style="margin-right: 12px" v-if="isEditingRow&&scope.row.id==rowEditData.id" @click="handleCellSave(scope.row)"><i class="el-icon-check"></i></el-button>
          <el-button type="text" style="margin-right: 12px" v-if="isEditingRow&&scope.row.id==rowEditData.id" @click="handleCellCancel(scope.row)"><i class="el-icon-close"></i></el-button>
          <el-button type="text" style="margin-right: 12px" v-if="scope.row.id!=rowEditData.id" @click="handleCellEdit(scope.row)"><i class="el-icon-edit"></i></el-button>
          <router-link :to="{path: '/shopManage/edit_goods',query: {id: scope.row.id,merchant_id: scope.row.merchant_id,storeGoodsListPage: page}}">
            <el-button style="margin-right: 8px" type="primary" size="mini">编辑</el-button>
          </router-link>
          <el-button type="danger" size="mini" @click="delGoods(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-col :span="24" class="footer-bar">
      <div class="page-code">
        <el-pagination
          background :current-page="page" :page-size="limit" layout="prev, pager, next" :total="pageTotal" @current-change="pageChange">
        </el-pagination>
      </div>
    </el-col>

    <!-- 商品详情模态款 -->
    <el-dialog title="商品详情" :visible.sync="detailVisible">
      <goods-detail-dialog :goodsDetail="goodsDetail" />
    </el-dialog>

    <!-- 展示图片 -->
    <el-dialog :title="'查看图片'" :visible.sync="imgDialogShow" >
      <el-form :label-position="'left'" label-width="150px">
        <div align="center"><img :src="imgDialogUrl" alt="" style="max-width:400px;margin:0 auto"></div>
      </el-form>
    </el-dialog>
    <!-- 展示图片 -->

    <el-dialog :title="'请选择需要导出的字段'" :visible.sync="exportDialogShow">
      <export-dialog :merchant_id="merchantId" :is_shop="isShop" :keyword="searchText"
                     :classify_id="childClassifyId?childClassifyId:classifyId"
                     @hideExportDialog="hideExportDialog" />
    </el-dialog>

  </div>
</template>

<script>
  import exportDialog from './compoents/export-dialog'
  import goodsDetailDialog from './compoents/goods-detail-dialog'
    export default {
      name: "shop_list",
      props: {
        isComponent: '',
        merchantIdProp: '', //通过组件传过来的门店ID
      },
      components: {
        'export-dialog': exportDialog,
        'goods-detail-dialog': goodsDetailDialog
      },
      data() {
        return{
          searchText: '',
          isShop: '',
          merchantId: '',
          merchantName: '',
          classifyId: '',
          childClassifyId: '',
          id: '',
          page: 1,
          limit: 8,
          totalPage: 0,
          tableData: [],
          tableLoadingShow: false,
          addFormVisible: false,
          detailVisible: false,
          pageTotal: 0,
          goodsDetail: '',
          merchantList: [],
          classifyList: [{id: 0,name: '无分类'}],
          classifyListSecond: [],
          editFormVisible: false,
          imgDialogUrl: '',
          imgDialogShow: false,
          uploadExcelDialog: false,
          isEditingRow: false,
          rowEditData: {
            merchant_id: '',
            id: '',
            selling_price: '',
            stock: '',
            sort: '',
            classify_second_id: '',
            classify_first_id: ''
          },
          editForm:{
            id: '',
            selling_price: '',//销售价格
            stock: '',//库存
            merchant_id: '',
            classify_second_id: '',
            classify_first_id: '',
            classify_id: ''
          },
          classifyListFirstRowEdit: [],
          classifyListSecondRowEdit: [],
          exportDialogShow: false
        }
      },
      watch: {
        merchantIdProp(val) {
          if(val){
            this.page = 1;
            this.searchText = '';
            this.isShop = '';
            this.classifyId = ''
            this.childClassifyId = ''
            this.merchantId = val
            this.getGoodsList()
          }
        },
        merchantId(value) {
          this.classifyId = ''
          if(value){
            this.getGoodsClassifyList(value)
          }
        },
        classifyId(value) {
          this.childClassifyId = ''
          this.getGoodsClassifyList(this.merchantId,value)
        }
      },
      created() {
        /*if(this.$route.query.goodsListPage){
          this.page = parseInt(this.$route.query.goodsListPage)
        }*/
      },
      mounted() {
        if(this.isComponent=='true'){
          this.merchantId = this.merchantIdProp
          if(this.merchantId){
            this.merchantId = this.merchantIdProp
          }
        }
        this.getGoodsList();
        this.getMerchantList();
      },
      beforeRouteEnter(to, from, next) {
        if(from.name=='edit_goods'){
          to.meta.isBack=true;
        }
        next();
      },
      activated() {
        /*if(this.$route.meta.isBack){

        }
        this.$route.meta.isBack=false*/
        //只刷新当前页面列表数据
        this.getGoodsList();
      },
      methods: {

        sortByStock(obj1, obj2) {
          return parseInt(obj1.stock) - parseInt(obj2.stock)
        },

        searchData() {
          this.page = 1;
          this.getGoodsList()
        },

        resetSearch(){
          this.page = 1;
          this.searchText = '';
          //goodsList不是组件的时候才清空merchantId
          if(!(this.isComponent==='true')){
            this.merchantId = '';
          }
          this.isShop = '';
          this.classifyId = ''
          this.childClassifyId = ''
          this.getGoodsList()
        },
        //分页
        pageChange(e) {
          this.page = e;
          this.getGoodsList();
        },

        onCopy(e){
          this.$message({
            type:'success',
            message:'复制成功'
          })
        },
        onError(erro){
          this.$message({
            type:'error',
            message:'复制失败'
          })
        },

        //获取门店的分类
        async getGoodsClassifyList(id,pid){
          let params = {
            limit:100,
            page:1,
            merchant_id: id,
            pid: pid?pid:''
          }
          const res = await this.$api.getGoodsClassifyList(params);
          if(res.data.level=='success'){
            let list = res.data.data;
            if(!pid){
              this.classifyList = res.data.data
              this.classifyList = []
              this.classifyList.push({id: 0,name: '无分类'})
              list.forEach((item,index) => {
                this.classifyList.push(item)
              })
            } else{
              this.classifyListSecond = res.data.data
            }
          }else{
            this.$message({
              message: res.data.message,
              type: 'warning'
            });
          }
        },

        //获取门店列表
        async getMerchantList(){
          let params = {
            limit:99,
            page:1
          }
          const res = await this.$api.getMerchantList(params);
          if(res.data.level=='success'){
            let list = res.data.data;
            this.merchantList = list;
          }else{
            this.$message({
              message: res.data.message,
              type: 'warning'
            });
          }
        },

        //获取商品列表
        async getGoodsList(){
          this.tableLoadingShow = true;
          let params = {
            limit: this.limit,
            page:this.page,
            merchant_id: this.merchantId,
            is_shop: this.isShop,
            keyword: this.searchText,
            classify_id: this.childClassifyId?this.childClassifyId:this.classifyId
          }
          const res = await this.$api.getGoodsList(params);
          if(res.data.level=='success'){
            let list = res.data.data;
            this.tableData = list;
            this.pageTotal = res.data.page_info.total
          }else {
            this.$message.error(res.data.message)
          }
          this.tableLoadingShow = false;
        },

        //获取商品详情
        async getGoodsDetail(id){
          const loadingOne = this.$loading({
            lock: true,
            text: '加载中...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          const res = await this.$api.getGoodsDetail({id: id});
          if(res.data.level=='success'){
            let data = res.data.data
            let className = ""
            if(res.data.data.classify_name_list&&res.data.data.classify_name_list.length>0){
              res.data.data.classify_name_list.forEach((item,index) => {
                className = className + item + ' '
              })
            }
            res.data.data.classify_name = className

            //商品详情设置
            if(data.detail){
              data.detail = data.detail.replace(/<img[^>]*>/gi, function (match, capture) {
                return match.replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/ig, '')
              });
              data.detail = data.detail.replace(/\<img/gi, '<img style="max-width:100%;height:auto;vertical-align: top;" ');
            }

            this.goodsDetail = res.data.data;

          }else{
            this.$message({
              message: res.data.message,
              type: 'warning'
            });
          }
          this.detailVisible = true;
          loadingOne.close()
        },

        //上架
        async spreadOn(id) {
          let judge = null;
          let tit = '上架该商品?';
          try {
            judge = await this.$confirm(tit, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            })
          } catch (error) {
            judge = 'cancel'
          }
          if (judge == 'confirm') {
            this.changeGoodsShop(id)
          }
        },

        //下架
        async spreadOff(id) {
          let judge = null;
          let tit = '下架该商品?';
          try {
            judge = await this.$confirm(tit, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            })
          } catch (error) {
            judge = 'cancel'
          }
          if (judge == 'confirm') {
            this.changeGoodsShop(id)
          }
        },

        //设置是否上下架状态
        async changeGoodsShop(id) {
          let res = await this.$api.changeGoodsShop({id: id})
          if (res.data.level == 'success') {
            this.$message.success(res.data.message);
            this.newDemandVisible = false;

            this.getGoodsList()
          } else {
            this.$message.error(res.data.message);
          }

        },

        //删除商品
        async delGoods(id){
          let _this = this;
          const params = {
            id:id,
          }
          //删除
          const judge= this.$confirm('删除该商品?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async() => {
            let res = await this.$api.delGoods(params)
            if(res.data.level=='success'){
              if(this.tableData.length==1&&this.page>1){
                this.page --;
              }
              _this.getGoodsList();
              this.$message({
                type: 'success',
                message: res.data.message
              });
            }else{
              this.$message({
                type: 'error',
                message: res.data.message
              });
            }
          }).catch(() => {
          });
        },

        //展示图片
        showImgDialog(url){
          this.imgDialogUrl = url;
          this.imgDialogShow = true;
        },

        //输入框清空事件
        inputClear() {
          this.page = 1
          this.getGoodsList()
        },

        //下拉框选择事件
       selectClear() {
          this.page = 1
          this.getGoodsList()
        },

        classifySelectClear() {
          this.page = 1
          this.childClassifyId = ''
          this.getGoodsList()
        },

        merchantSelectClear() {
          this.page = 1
          this.classifyId = ''
          this.childClassifyId = ''
          this.classifyListSecond = ''
          this.classifyList = []
          this.classifyListSecond = []
          this.getGoodsList()
        },

        //编辑商品弹出框事件
        handleCellEdit(item) {
          this.isEditingRow = true
          this.rowEditData.merchant_id = item.merchant_id//不修改，获取分类使用
          this.rowEditData.id = item.id
          this.rowEditData.selling_price = item.selling_price
          this.rowEditData.stock = item.stock
          this.rowEditData.sort = item.sort
          /*this.rowEditData.classify_first_id = item.classify_first_id
          this.rowEditData.classify_second_id = item.classify_second_id*/
          /*let str = [];
          item.classify_list.forEach(item=>{
            str.push(parseInt(item));
          })*/
          if(item.classify_list[0]){
            this.rowEditData.classify_first_id = parseInt(item.classify_list[0]);
          } else{
            this.rowEditData.classify_first_id = '';
          }
          if(item.classify_list[1]){
            this.rowEditData.classify_second_id = parseInt(item.classify_list[1]);
          } else {
            this.rowEditData.classify_second_id = '';
            this.classifyListSecond = []
          }
          /*this.rowEditData.classify_id = str*/
          this.getGoodsClassifyListByRowEdit(item.merchant_id,'')
          this.getGoodsClassifyListByRowEdit(item.merchant_id,this.rowEditData.classify_first_id)
        },

        //编辑某行商品取消事件
        handleCellCancel(){
          this.isEditingRow = false
          this.rowEditData.id = ''
        },

        //编辑某行商品保存事件
        handleCellSave(item) {
          let data = item
          this.editForm.id = item.id;
          this.editForm.upc = item.upc
          this.editForm.merchant_id = item.merchant_id

           this.editForm.selling_price = this.rowEditData.selling_price//销售价格
           this.editForm.stock = this.rowEditData.stock;//库存
          this.editForm.sort = this.rowEditData.sort
          this.editForm.classify_first_id = this.rowEditData.classify_first_id
          this.editForm.classify_second_id = this.rowEditData.classify_second_id

          this.editForm.classify_id = []
          if(this.rowEditData.classify_second_id){
            this.editForm.classify_id.push(this.rowEditData.classify_first_id)
            this.editForm.classify_id.push(this.rowEditData.classify_second_id)
          } else if(this.rowEditData.classify_first_id) {

            this.editForm.classify_id.push(this.rowEditData.classify_first_id)
          }
          this.setGoods()
        },

        //编辑商品
        async setGoods(){
          const params = this.editForm;
          const res = await this.$api.setGoods(params);
          if(res.data.level=='success'){
            this.$message({
              message: '修改成功',
              type: 'success',
            });
            await this.getGoodsList()
            this.rowEditData.id = ''
            this.isEditingRow = false
          }else{
            this.$message({
              message: res.data.message,
              type: 'warning'
            });
          }
        },


        //获取表格编辑的分类列表
        chooseClassifyByRowEdit(type) {
          if(type=="first"){
            this.rowEditData.classify_second_id = ''
            this.getGoodsClassifyListByRowEdit(this.rowEditData.merchant_id,this.rowEditData.classify_first_id)
          } else if(type == "second"){
          }
        },

        //获取表格里面的分类
        async getGoodsClassifyListByRowEdit(id,pid){
          let params = {
            limit:999,
            page:1,
            merchant_id: id,
            pid: pid?pid:''
          }
          const res = await this.$api.getGoodsClassifyList(params);
          if(res.data.level=='success'){
            let list = res.data.data;
            if(!pid){
              this.classifyListFirstRowEdit = res.data.data
            } else{
              this.classifyListSecondRowEdit = res.data.data
            }
          }else{
            this.$message({
              message: res.data.message,
              type: 'warning'
            });
          }
        },

        //跳转导入商品页面
        showUploadExcelDialog() {
          let merchantId = ''
          if(this.isComponent==='true'){
            merchantId = this.merchantId
          }
          this.$router.push({path: '/shopManage/upload_goods',query: {merchant_id: merchantId}})
        },

        //隐藏导出窗口
        hideExportDialog() {
          this.exportDialogShow = false
        }

      }
    }
</script>

<style scoped lang="scss">
  .contentFist {
    display: flex;
    /*justify-content: space-between;*/
    /*margin-top: 40px;*/
  }

  .detail{
    margin-top: 20px;
    font-size: 14px;
    line-height: 32px;
  }


  .title:last-child{
    /*margin-bottom: 20px;*/
  }

  .title {
    font-size: 18px;
    font-weight: bold;
  }

  .detail{

  }

  .spanNum {
    width: 25px;
    height: 25px;
    line-height: 25px;
    margin-right: 15px;
    text-align: center;
    display: inline-block;
    border-radius: 50%;
    border: 1px solid black;
    .detail {
      font-size: 15px;
      margin-top: 10px;
      margin-left: 50px;
      color: #BBBBBB;
    }

    .btnLeft {
      margin-left: 50px;
    }
  }

  .upload-demo{
    margin-top: 10px;
  }

  .table-edit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    .content {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .cell-icon {
      cursor: pointer;
      color: #3963bc;
      font-size: 16px;
    }

    .cell-icon-edit {
      display: flex;
      margin-left: 20px;
      width: 50px;
      justify-content: space-between;

      .cell-cancel {
        cursor: pointer;
        color: #3963bc;
        font-size: 16px;
      }

      .cell-save {
        cursor: pointer;
        color: #3963bc;
        font-size: 16px;
        margin-right: -20px;
      }
    }
  }
</style>
<style scoped>
  .action-bar{
    background-color: #f2f2f2;
    height: 60px;
    margin: 10px 0px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding-left: 20px;
  }
  .footer-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f2f2f2;
    padding: 8px 0;
    margin: 10px 0px;
    box-sizing: border-box;
  }

  /* 图片上传css */
  .avatar-uploader /deep/.el-upload {
    border: 1px dashed #807979;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .user-detail-pets-col{
    /*display: flex;*/
  }

  .spec-col-left{
    /*width: 300px;*/
  }

  .h-title{
    color: #333333;
    font-size: 25px;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }

  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }

  /deep/.el-table td, /deep/.el-table th {
    text-align: center;
  }
  /deep/.el-table .warning-row {
    background: #f8f9fa;
  }

  /deep/.el-table .success-row {
    background: #ffffff;
  }
  /deep/.el_table_style{
    border: 1px solid #dee2e6;
  }
  /deep/.el-table td {
    border: none;
  }

</style>
